<template id="aaa">
  <div>
    <!-- 单元格 -->
    <CellsComp value="类型" title="全部音单" icon="service-o"></CellsComp>
    <!-- 单元格 -->

    <!-- 宫格 -->
    <van-grid
      :column-num="2"
      :gutter="10"
      :border="false"
      :clickable="true"
      :center="false"
    >
      <van-grid-item v-for="item in Albums" :key="item.id" :text="item.title">
        <template #icon>
          <img
            :src="item.front_cover"
            alt=""
            style="width: 150px; height: 150px"
          />
          <span class="grid-text">
            {{ item.music_count }}
            <p></p>
          </span>
        </template>
      </van-grid-item>
    </van-grid>
    <!-- 宫格 -->

    <!-- 弹出窗 -->
    <!-- 弹出窗 -->
  </div>
</template>

<script setup lang="ts">
import { getDaftar } from "../api/api";
import { ref, onMounted } from "vue";

const Albums = ref([]);

const getPalaceLattice = async () => {
  const res = await getDaftar();
  // console.log(1, res);
  if (res.status === 200) {
    Albums.value = res.data.albums;
  }
};

onMounted(() => {
  getPalaceLattice();
});
</script>

<style scoped lang="scss">
#app {
  .van-tabs__content {
    //宫格
    .van-grid {
      :deep(.van-grid-item__content) {
        padding: 0px;
        .van-badge__wrapper {
          background-image: url(../logo/3.png);
          background-position: -284px -8px;
          background-size: 228px 164px;
        }
      }
      .van-grid-item__content {
        .grid-text {
          position: absolute;
          top: 130px;
          left: 96px;
          color: #fff;
          text-shadow: 0.5px 0 1px #000;
          width: 50px;
          text-align: right;
          p {
            background-image: url(../logo/4.png);
            float: left;
            margin: 0px;
            width: 17px;
            height: 18px;
            background-position: -277px -12px;
            background-size: 98px 75px;
          }
        }
      }
    }
  }
}
</style>
